<template>
    <div>
        <div class="b-c2 c-f">
            <div class="width-75 tc z-header fs-36">
                <span class="lt" @click="$router.back(-1)">
                    <i class="iconfont icon-zuo m-t-18"></i>
                </span>
                <span>抢单详情</span>
            </div>
        </div>
        <div>
            <div class="width-75">
                <div class="m-t-28 flex">
                    <!--头像、名字和学校-->
                    <div class="row">
                        <div>
                            <img :src="content.usersTo.portrait" alt="" class="portrait">
                        </div>
                        <div class="m-l-14">
                            <h2 class="fs-36 c-3">{{content.usersTo.nickName}}</h2>
                            <p class="fs-24 c-3 m-t-18">{{content.school.name}}</p>
                        </div>
                    </div>
                    <div class="rt fs-24">
                        {{content.ago}}
                    </div>
                </div>
                <!--筹帮内容-->
                <div class="fs-30 c-3 m-t-18 l-h-4">
                    <!--中午十二点放学谁能帮我去校门口取下快递，中间快递员停留二十分钟，谢谢大家了！-->
                    <!--{{conten.requirement}}-->
                    {{content.requirement}}
                </div>
                <div class="m-t-18">
                    <img v-for="imgsrc in content.payrollPicture" :src="imgsrc" alt="" class="raise-img m-l-25 m-t-1">
                </div>
                <div class="m-t-18">
                    <div>
                        <i class="iconfont icon-dingweiweizhi fs-30"></i>
                        <span class="fs-24">{{content.payrollAddress}}</span>
                    </div>
                </div>
                <!--<div class="m-t-4 c-3">
                        <div class="fs-24 fs-30">
                            酬金:
                            <span class="c-f3">￥{{content.payrollMoney2}}块</span>
                        </div>

                    </div>-->
            </div>
            <div class="index-blank m-t-18">
            </div>
            <nav class="m-t-18 tl">
                <ul>
                    <li class="z-header bb-1-e width-75 flex">
                        <div>酬金</div>
                        <div>
                            <span>{{content.payrollMoney2}}</span>
                            <span>元</span>
                        </div>
                    </li>
                    <li class="z-header bb-1-e width-75 flex">
                        <div>
                            时间
                        </div>
                        <div>
                            {{content.payrollTime}}
                        </div>
                    </li>
                    <li class="z-header bb-1-e width-75 flex">
                        <div>
                            地点
                        </div>
                        <div>
                            {{content.payrollAddress}}
                        </div>
                    </li>
                </ul>
            </nav>
            <div class="width-75 tc m-t-6">
                <button class="b-c2 c-f p-tb-18 fs-32 w" @click="single()">
                    立即抢单
                </button>
            </div>
        </div>

    </div>
</template>
<script>
import { allDate, contrastDate,z } from '../../assets/js/common'
import { MessageBox } from 'mint-ui';
export default {
    data() {
        return {
            payrollId: this.$route.query.id,
            content: ""
        }
    },
    methods: {
        // 动态详情内容
        details() {
            var params = new URLSearchParams();
            params.append("payrollId", this.payrollId);
            this.$http({
                method: "post",
                url: localPath + '/payroll/findOnePyroll',
                data: params
            }).then((data) => {
                var arr = data.data.message;
                //结束时间进行解析
                arr.payrollTime = allDate(arr.payrollTime);
                //几分钟前
                arr.ago = contrastDate(arr.createTime);
                // 图片
                arr.payrollPicture =  arr.payrollPicture.split(",");
                this.content = arr;
                console.log(this.content);
            }).catch((error) => {
                console.log(error);
            })
        },
        single(){
            var params = new URLSearchParams();
            params.append("payrollId",this.payrollId);
            this.$http({
                method:"post",
                url: localPath + '/payroll/updateStates1To2',
                data:params
            }).then((data)=>{
                console.log(data);
                MessageBox.alert(data.data.message);
            }).catch((error)=>{
                console.log(error);
            })
        }
    },
    mounted() {
        this.details();
        document.addEventListener(z());
    },
}
</script>
<style>
.raise-img {
    width: 1.83rem;
    height: 1.31rem;
}
</style>
